*{margin: 0px;padding: 0px;}
html{
    height: 100%;/*继承浏览器高度*/
}
ul,ol,li{
    padding: 0px;
    list-style: none;
}
body{
    /*display: flex;!*弹性盒模型居中方法*!
    justify-content: center;
    align-items: center;*/
    height: 100%;/*继承html的height*/
    position: relative;
}
#box{
    width: 100%;
    height: 100%;/*继承body的height*/
}
#box ol li{
    width: 100%;
    height: 100%;/*继承box的height*/
    background: #368 url('../images/1.jpg') no-repeat center/cover;
    position: absolute;
    top:0px;
    left:0px;
}
#box ol li:nth-child(2){/*条件伪类选择器*/
    background-image: url('../images/2.jpg');
}
#box ol li:nth-child(3){/*条件伪类选择器*/
    background-image: url('../images/3.jpg');
}
#box ol li:nth-child(4){/*条件伪类选择器*/
    background-image: url('../images/4.jpg');
}
#wrap{
    width: 1090px;
    height: 429px;
    box-shadow: 0px 0px 100px #222;/*盒子阴影：X,Y,羽化与半径，半径，color，内外阴影（reset内）*/
    position: absolute;
    top:0px;/*万能定位居中*/
    left:0px;
    bottom:0px;
    right: 0px;
    margin:auto;
    background: #fff;
}
#wrap ul{
    width: 120%;
}
#wrap ul li{
    width: 100px;
    height: 429px;
    background: url('../images/1.jpg');
    float: left;
}
#wrap ul li:nth-child(2){
    background: url('../images/2.jpg');
}
#wrap ul li:nth-child(3){
    background: url('../images/3.jpg');
}
#wrap ul li:nth-child(4){
    background: url('../images/4.jpg');
    width: 790px;
}
#wrap ul li div{
    width: 100px;
    height: 100%;
    background: rgba(0,0,0,0.5);
    cursor: pointer;
}
#wrap div p{
    color: #fff;
    padding: 41px;/*挤压空间达到竖排效果*/
}
